<template>
	<div class="details-basic-info">
		<div class="basicinfo-con1">
			<h4 class="prod-title">{{{spuInfo.spuName}}}</h4>

			<!--<span v-if="isapp" class="share" @click="share" ca="P商品详情页_{{spuInfo.spuName}}$分享">分享</span>--> 

			<!-- prod-price-wrap -->
			<div class="prod-price-wrap display_flex">
				
				<!-- end priceType == 1 [渠道价] [单品] -->
				<div v-if="(price.priceType == 1 && iscombined != 2) || sale">
					<div class="flex_1">
						<em class="gray font14">暂不销售</em>
					</div>
				</div>
				<!-- end priceType == 1 [渠道价] -->
				
				<!-- priceType == 3 [门店价], promotionPrice == true [促销价], iscombined == 2 [组合商品- -取渠道价] -->
				<div v-else="price.priceType == 3 || iscombined == 2 || price.promotionPrice == true">
					
					<!--固定价格-->
					<div class="prod-price flex_1" v-show="spuInfo.fixedPrice == 1 ? true : false">
						<div class="price-box" :class="price.cashPrice < price.marketPrice?'':'no-discount'">
							<span class="yang-pic" v-if="price.cashPrice || price.cashPrice == 0">￥</span>
							<span class="yang-pic-price">
								<em class="big-price">{{{(price.cashPrice == 0 ? '0' :  price.cashPrice).toFixed(2) | dollarPrice}}}</em>
							</span>
						</div><span v-if="price.cashPrice < price.marketPrice" class="original-price">价格  ￥<em>{{price.marketPrice}}</em></span>
						<span class="original-discount" v-if="discount.length>0" v-for="item in discount">{{{item.discount}}}</span>
						<span class="plummetsPrice" v-if="straight">{{straight}}</span>
					</div>
					<!--end 固定价格-->
					
					<!--非固定价格-->
					<div class="prod-price flex_1" v-show="spuInfo.fixedPrice == 2 ? true : false">
						<div class="price-box">
							<span class="yang-pic" v-if="price.marketPrice || price.marketPrice === 0">￥</span>
							<span class="yang-pic-price">
								<em class="big-price">{{{(price.marketPrice == 0 ? '0' :  price.marketPrice) | dollarPrice}}} <span class="font14">起</span></em>
							</span>
						</div>
						<strong class="yang-strong">需到店根据车型定价，仅供参考</strong>
					</div>
					<!--end 非固定价格-->
				</div>
				<!-- end priceType == 3 [门店价] -->
				
			</div>
			<!-- end prod-price-wrap -->
		</div> 
		
		<div class="gift" @click="shopGift" v-show="coupon.length>0?true:false" ca="P_{{spuInfo.spuName}}$礼品卡选择">

			<div v-for="item in coupon"><strong>{{item.prmtTag}}</strong><span>{{item.prmtShortName}}</span></div>
			<div class="sf-arrow-right"></div>
		</div>

		<!-- shopGift -->
		<mt-popup :visible.sync="popupVisible" popup-transition="popup-fade">
			  <ul class="popup-box">
			  	<li class="clearfix" v-for="item in coupon">
			  		<span class="fl gift-label">{{item.prmtTag}}</span>
			  		<div class="fl gift-explain">
			  			<!--rewardType-->
				  		<h5>{{item.prmtName}}</h5>
			  			<p class="gift-time">活动时间：{{item.beginTime}}-{{item.endTime}}</p>
			  		</div>
			  	</li>
			  </ul>
			  <div class="popup-button">
			  	<a @click="popUp" ca="P_{{spuInfo.spuName}}$礼品卡确定">确定</a>
			  </div>
			  <div class="details-basic-info-close sf-close" @click="giftsClose" ca="P_{{spuInfo.spuName}}$关闭礼品卡"></div>
		</mt-popup>
		<!-- end shopGift -->

	</div>
	
</template>

<script type="text/javascript">

	import Vue from 'vue';
	//弹窗
	import {Popup} from 'mint-ui';
	Vue.component(Popup.name, Popup);

    import {Toast} from 'mint-ui';

	export default {
		data() {
			return {
				popupVisible: false, //
				price: {}, // 价格
				prmt: {}, // 促销
				spuInfo: '', // spuInfo
				discount: [], // 折扣  // 具有多个折扣
				straight: '', // 直降
				coupon: [], // 赠券
				iscombined: '', // 是否是组合商品
			    isapp:false,
			    sale: false // 暂不可受
			}
		},
        ready:function(){
            this.checkAppcode();
        },
		methods: {
			checkAppcode:function(){
				var ua = window.navigator.userAgent;//获取ua
		        if(ua.indexOf("MongoToC")>=0){
                   this.isapp =  true;
		        }
			},
			/**************** 分享功能 隐藏  *******************/
//			share:function(){
//				/*var h = window.location.href;
//				    h = h.split("userInfo")[0]; */ 
//				var h = window.location.href;
//				    h = h.split("userInfo")[0];
//
//              var title = this.spuInfo.spuName||"分享商品",
//              	content = this.spuInfo.spuName||"我在车享家发现了个不错的服务商品",
//              	imgUrl = this.androidImageList[0].sourceFullImage||this.androidImageList[0].androidImageList||"";
//
//              var opt = {
//                  url:h+'?wechat_redirect',
//		            title:title,
//		            content:content,
//		            imgUrl:imgUrl
//              };             
//              if(h&&title&&content&&imgUrl){	
//					lb.shareInfo(opt ,function (data) {})
//		        }else{
//                  Toast("分享失败:"+JSON.stringify(opt));
//		        }
//			},
			/**************** 分享功能 隐藏  *******************/
			shopGift: function() {
				this.popupVisible = !this.popupVisible;
			},
			// 关闭满赠窗口
			giftsClose: function () {
				this.popupVisible = !this.popupVisible;
			},
			popUp: function () {
				this.giftsClose();
			},
			timestamp: function ( time ){
				var date = new Date(time);
				var Y = date.getFullYear() + '.';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '.';
				var D = date.getDate() + ' ';
				return Y+M+D;
			}
		},
		props: ['sale'],
		events: {
			// queryCxjMdsePricePrmt 商品各种状态
			detailsBasicInfoEvent: function ( queryCxjMdsePricePrmt ) {
				/****** 修改 queryCxjMdsePricePrmt 字段为空 显示为 暂不可售 *******/
				if ( !isNaN(queryCxjMdsePricePrmt) ||  queryCxjMdsePricePrmt.result == 0) {
					this.sale = true;
					return false;
				}
				/****** 修改 queryCxjMdsePricePrmt 字段为空 显示为 暂不可售 *******/
				
//				debugger;
				// 价格
				this.price = queryCxjMdsePricePrmt.price;
				
				this.coupon = []; // 赠品
				this.straight = ''; // 直降
				this.discount = []; // 折扣
				
				var that = this;
				var prmtArr = queryCxjMdsePricePrmt.prmt;
				try{
					for ( var i=0; i<prmtArr.length; ++i ) {
						
						if ( prmtArr[i].rewardType == 1 && prmtArr[i].prmtType !=2) { // 赠品
							var objCoupon = {
								prmtTag: prmtArr[i].prmtTag,
								prmtShortName: prmtArr[i].prmtShortName,
								prmtName: prmtArr[i].prmtName,
								beginTime: that.timestamp(prmtArr[i].beginTime),
								endTime: that.timestamp(prmtArr[i].endTime)
							}
							
							this.coupon.push(objCoupon);
						} else if ( prmtArr[i].rewardType == 2 ) { // 直降
							this.straight = prmtArr[i].prmtTag;
						} else if ( prmtArr[i].rewardType == 3  && prmtArr[i].prmtType !=2 ) { // 折扣
							this.discount.push({ discount: prmtArr[i].prmtTag});
						} else if ( prmtArr[i].rewardType == 0 ) { // 无	
						}
						
					}
				}catch(e){
				}
				
			},
			// detailsBasicInfoSpuName 获取商品的名字
			detailsBasicInfoSpuName: function ( spuInfoBasic ) {
				
				/***********  修改组商品fixedPrice 为null *********/
				if ( spuInfoBasic.iscombined == 2  ) { // [iscombined == 2  固定商品] 
					spuInfoBasic.fixedPrice = 1;	
					this.iscombined = spuInfoBasic.iscombined;
				}
				
				/***********  修改组商品fixedPrice 为null *********/
				
				// this.spuInfo.spuName = spuInfoBasic.spuName;
				// fixedPrice
				// 存在 fixedPrice  [1 - 固定价格] [0 - 非固定价格] // 把 0 处理成2  表示 固定价格
				// [1 - 固定价格] [2 - 非固定价格]
				if ( spuInfoBasic.fixedPrice == 0 ) {
					spuInfoBasic.fixedPrice = 2;
				}
				
				if ( spuInfoBasic && spuInfoBasic != 'null' ) {
					this.spuInfo = '';
					this.$set('spuInfo',spuInfoBasic);
				}
				
			},
			detailsFocusDataEvent:function(msg){
				var androidImageList = '';
				var count = 0;
				for(var i in msg) {
					count++;
				}
				
				var arrObj = [];
				var ArrObj = {
				  "androidImageList": '',
				};
				
				if(count && count >= 1) {
					this.spuName = msg['spuName'];
					
					if ( typeof msg['androidImageList'] != 'string' ) {
						androidImageList = msg['androidImageList'];
					} else {
						for ( var i in ArrObj ) {
							ArrObj[i] = msg[i];
						}
						arrObj.push(ArrObj);
						androidImageList = arrObj;
					}
					this.$set('androidImageList', androidImageList);
					this.defalutImg = false;
				} else {
					this.defalutImg = true;
				}
			}
			
		}
	}

</script>
<style lang="scss" scoped>
	@import '../../assets/css/_variables.scss';
	@import '../../assets/css/_functions.scss';
	.font14 {
		font-size: rem(14);
	}
	.details-basic-info {
		
		background: $_fff;
		font-size: $_defaultFont - 7;
		
		
		.basicinfo-con1 {
			// height: rem(66);
			position: relative;
			margin: 0 rem(20);
			border-bottom: 1px solid $_eee;
			overflow:hidden;
			.prod-title {
				width:rem(290);
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
				font-size: rem(20);
				font-weight:bold;
				color: $_243742;
				line-height: rem(24);
				float:left;
				padding:rem(10) 0 rem(20);
			}
			.share{
                display:inline-block;
				position: absolute;
				line-height:rem(14);
				height: rem(14);
				font-size: rem(14);
				padding-left: rem(16);
				background: transparent url(../../assets/images/imgs/share.png) no-repeat left center;
				background-size: rem(13) rem(13);
				right: rem(10);
				top: rem(6);
			}
			.prod-price-wrap {
				font-size: rem(20);
				// line-height: rem(42);
				height: rem(36);
				padding-bottom: rem(2);
				clear:both;
				position:fixed;
				bottom:rem(23);
				z-index:2;
				.prod-price {
					color: $_price;
					margin-right: rem(12);
					.price-box{
						height:rem(20);
					}
					.no-discount{
						padding-top:1rem;
					}
					strong {
						font-weight: normal;
						font-size: rem(12);
						color: $_999;
						display:block;
						margin-top:rem(9);
						// padding-left: rem(14);
					}
					.original-price {
						font-size: rem(12);
						color: $_999;
						display:inline-block;
						margin-top:rem(9);
						// padding-left: rem(10);
					}
					.original-discount {
						font-size: rem(12);
						color: $_price;
						border-radius: rem(4);
						border: 1px solid #FF6600;
						padding: 0 rem(4);
						margin-right: rem(4);
					}
				}
				.yang-pic,.small-price {
					font-size: rem(14);
				}
				.prod-price-depreciate {
					font-size: rem(12);
					color: #999;
				}
				.plummetsPrice {
					color: $_fff;
					font-size: rem(12);
					background: $_ff6600;
					padding: 0 rem(2);
					border-radius: rem(2);
					display:inline-block;
				}
				.place-order {
					@include hlh(18px);
					color: $_price;
					font-size: rem(10);
					border-radius: rem(2);
					border: 1px solid $_ff6600;
					padding: 0 rem(2);
					margin-left: rem(4);
					margin-top: rem(10);
				}
			}
		}
		.gift {
			position: relative;
			border-bottom: 1px solid #c9d5e0;
			// padding-top: rem(6);
			margin:0  rem(20);
			position: relative;
			overflow: hidden;
			>div {
				line-height: rem(53);
				font-size: rem(13);
			}
			strong {
				padding: rem(1) rem(5) rem(2) rem(5);
				font-weight: normal;
				font-size: rem(10);
				border: 1px solid $_ff0000;
				color: $_price;
				border-radius: rem(4);
				margin-right: rem(7);
			}
			span{
				vertical-align: middle;
			}
			.gift-icon {
				position: absolute;
				top: 50%;
				margin-top: - rem(12);
				right: 0;
			}
			.sf-arrow-right {
				margin-top: - rem(6);
			    position: absolute;
			    /* left: 90%; */
			    right: 0;
			    top: 50%;
			    margin-right: 0;
			}
		}
		.mint-popup {
			width: 100%;
			transform: translate3d(0, 0, 0);	
			top: auto;
			left: auto;
			bottom: 0;
			position: fixed;
			.popup-box {
				padding-top: rem(16);
				li {
					height: rem(64);
					border-bottom: 1px solid $_dedede;
					padding-left: rem(10);
					padding-top: rem(10);
				}
				.gift-label {
					font-size: rem(10);
					border: 1px solid $_ff0000;
					color: $_price;
					margin-right: rem(8);
					border-radius: rem(2);
					padding: 0 rem(2);
					margin-top: rem(2);
				}
				.gift-explain {
					h5 {
						font-size: rem(15) !important;
						line-height: rem(18);
						color: $_333;
					}
					.gift-time {
						font-size: rem(13);
						line-height: rem(26);
						color: $_999;
					}
				}
			}
			.popup-button {
				@include hlh(48px);
				width: 100%;
				margin-top: rem(108);
				text-align: center;
				background: $_0299f6;
				a {
					display: block;
					color: $_fff;
					font-size: rem(18);
				}
			}
			.details-basic-info-close {
				position: absolute;
				right: rem(10);
				top: rem(10);
				font-size: 14px;
			}
		}
	}
</style>